<template>
	<!-- 自定义顶部导航栏 -->
	<view class="Top-view">
		<view :style="`height:${ht}px`">
			<view :style="`height:${top}px`"></view>
			<view :style="`line-height:${height}px;padding-left:10px`" class="title">淘淘商城后台</view>
		</view>
		<!-- 定位的订单收益板块 -->
		<view class="profit-view" :style="`top:${ht+20}px`">
			<view class="profit-num">
				<text>累计收益(元)：</text>
				<text>104329</text>
			</view>
			<view class="profit-sale">
				<view>
					<text>今日销售额</text>
					<text>4539</text>
				</view>
				<view>
					<text>今日订单数</text>
					<text>2009</text>
				</view>
				<view>
					<text>累计订单数</text>
					<text>43432</text>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 九宫格布局 -->
	<view class="Gong-ge" :style="`top:${profit_top}px`">
		<view v-for="(item,index) in Sudoku.plate" :key="index" @click="to(index)">
			<image :src="item.image" mode="aspectFit"></image>
			<text>{{item.name}}</text>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,reactive,toRefs} from'vue'
	
	// 存储右上角胶囊的数据
	const capsule_data=reactive({
		height:0,
		top:0,
		ht:0,
		profit_top:0
	})
	const {height,top,ht,profit_top}=toRefs(capsule_data)
	
	// 九宫格数据
	const Sudoku=reactive({
		plate:[
			{
				image:'/static/detail/hengfu.svg',
				name:'横幅管理'
			},
			{
				image:'/static/detail/miaosha.svg',
				name:'秒杀管理'
			},
			{
				image:'/static/detail/shangpin.svg',
				name:'商品管理'
			},
			{
				image:'/static/detail/dingdan.svg',
				name:'订单管理'
			},
			{
				image:'/static/detail/fenlei.svg',
				name:'分类管理'
			}
		]
	})
	
	
	
	onMounted(()=>{
		capsuleCoord()
		proFit()
	})
	
	// 获取右上角的胶囊按钮坐标
	function capsuleCoord(){
		// 解决H5端没有该方法报错
		if(uni.getMenuButtonBoundingClientRect){
			let {height,top} = uni.getMenuButtonBoundingClientRect()
			capsule_data.height=height
			capsule_data.top=top
			capsule_data.ht=height+top
		}
	}
	
	// 计算收益板块的高度
	function proFit(){
		const query = wx.createSelectorQuery()
		query.select('.profit-view').boundingClientRect()
		query.exec((res)=>{
			capsule_data.profit_top = res[0].height + (capsule_data.ht+20)+ 10
		})
	}
	
	// 页面跳转
	function to(index){
		console.log(index)
		switch(index){
			case 0:
			uni.navigateTo({
				url:'/pages/banner-amdin/banner'
			})
			break;
			case 1:
			uni.navigateTo({
				url:'/pages/seckill-admin/seckill'
			})
			break;
			case 2:
			uni.switchTab({
				url:'/pages/commodity/commodity'
			})
			break;
			case 3:
			uni.switchTab({
				url:'/pages/order/order'
			})
			break;
			case 4:
			uni.navigateTo({
				url:'/pages/sort-admin/index'
			})
		}
	}
	
	
</script>

<style>
page{background-color: #f4f4f4;}
.Top-view{
	height: 330rpx;
	position: relative;
	background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
	
}
.title{
	color: white;
	font-size: 34rpx
}
.profit-view{
	background-color: #FFFFFF;
	position: absolute;
	left: 20rpx;
	right: 20rpx;
	border-radius: 10rpx;
	padding: 20rpx;
}
.profit-num{
	display: flex;
	/* flex-direction: column; */
	padding-bottom: 20rpx;
}
.profit-num text:nth-child(2){
	font-weight: bold;
	/* font-size: 40rpx; */
	/* padding-top: 10rpx; */
}
.profit-sale{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.profit-sale view{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.profit-sale view text:nth-child(1){
	color: #a7a7a7;
	padding-bottom: 10rpx;
}
.profit-sale view text:nth-child(2){
	font-weight: bold;
}
.Gong-ge{
	background-color: #FFFFFF;
	margin: 0 20rpx 20rpx 20rpx;
	border-radius: 10rpx;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	left: 0;
	right: 0;
	color: #555555;
}
.Gong-ge image{
	width: 55rpx;
	height: 55rpx;
	display: block;
	margin-bottom: 20rpx;
}
.Gong-ge view{
	width: calc(25% - 10rpx*2);
	margin: 20rpx 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

</style>
